<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/include/taglibs.jsp"%>
<head>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/openflash/swfobject2.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/json2.js"></script>

</head>
<style type="text/css">
.c-title-c {
	font-size: 14px;
	font-weight: bold;
	height: 32px;
	margin: 8px 0px 0px 0px;
}

.c-title-c a {
	font-size: 14px;
	font-weight: bold;
	line-height: 32px;
	text-decoration: none;
	color: #666;
	height: 32px;
	display: inline;
	padding: 0px 0px 0px 24px;
	background-repeat: no-repeat;
	background-position: 0px center;
}

.c-title-c a:hover {
	color: #000;
}

.c-title-c a.collapsed {
	background-image: url(<%= request . getContextPath() %>/ images/
		expand_off_2 . gif );
}

.c-title-c a.collapsed:hover {
	background-image: url(<%= request . getContextPath() %>/ images/
		expand_on_2 . gif );
}

.c-title-c a.expanded {
	background-image: url(<%= request . getContextPath() %>/ images/
		collapse_off_2 . gif );
}

.c-title-c a.expanded:hover {
	background-image: url(<%= request . getContextPath() %>/ images/
		collapse_on_2 . gif );
}

.c-title-x a {
	padding: 0px 0px 0px 16px;
	background-repeat: no-repeat;
	background-position: 0px 40%;
}

.c-title-x a.collapsed {
	background-image: url(<%= request . getContextPath() %>/ images/
		expand_small . gif );
}

.c-title-x a.expanded {
	background-image: url(<%= request . getContextPath() %>/ images/
		collapse_small . gif );
}

.chart-container {
	border: 1px solid #ccc;
	background-image: url(<%= request . getContextPath() %>/ images/
		description_bg . jpg );
	background-repeat: repeat-x;
	background-position: bottom;
}

.chart-container {
	border: 1px solid #ccc;
	background-image: url(<%= request . getContextPath() %>/ images/
		description_bg . jpg );
	background-repeat: repeat-x;
	background-position: bottom;
}

.chart-container .chart-title {
	height: 24px;
	position: relative;
}

.chart-container .chart-title span {
	display: block;
	height: 24px;
	line-height: 24px;
}

.chart-container .chart-title .title {
	font-weight: bold;
	background-repeat: no-repeat;
	background-position: 0px center;
	background-image: url(<%= request . getContextPath() %>/ images/
		arrow_right . gif );
	padding: 0px 0px 0px 16px;
}

.chart-container .chart-title .link {
	position: absolute;
	right: 0px;
	top: 0px;
}

.chart-container .chart-title .link a {
	display: block;
	float: right;
	height: 24px;
	width: 24px;
}

.chart-container .chart-title .link a.max {
	background-image: url(<%= request . getContextPath() %>/ images/
		maximize_off . gif );
	background-repeat: no-repeat;
	background-position: center center;
}

.chart-container .chart-content {
	height: 256px;
	border: 1px solid #ccc;
	background-color: #fff;
}

.chart-container .chart-desc {
	margin-bottom: 16px;
}

.chart-container .chart-desc .chart-property {
	margin-top: 8px;
}

.chart-container .chart-desc .chart-property .property span {
	font-weight: bold;
	margin: 0px 4px 0px 4px;
	height: 24px;
	line-height: 24px;
}

.description-space {
	height: 32px;
	line-height: 32px;
	border: 1px solid #ccc;
	background-image:
		url("<%=request.getContextPath()%>/images/description_bg_2.jpg");
	background-repeat: repeat-x;
	background-position: bottom;
	margin: 8px 4px 0px 4px;
	position: relative;
}

.description-space span {
	font-weight: bold;
	height: 32px;
	line-height: 32px;
	margin: 0px 4px 0px 8px;
}

.description-space span.ico {
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 16px;
}

.description-space span.splite-line {
	font-weight: normal;
	margin: 0px 4px 0px 8px;
	color: #ccc;
}

.description-space div.shortcut {
	position: absolute;
	right: 0px;
	top: 0px;
	width: auto;
	height: 32px;
}

.description-space div.shortcut a {
	float: left;
	display: block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-decoration: none;
	text-align: center;
}

#port-list .list-value {
	font-size: 8pt;
	line-height: 16px;
}

#port-list .list-value .list-value {
	line-height: 16px;
	height: 16px;
}

#port-list .list-value div.list-title {
	line-height: 16px;
	height: 16px;
}

#port-list .list-value div.in,#port-list .list-value div.out {
	line-height: 16px;
	height: 16px;
	font-size: 8pt;
}

#port-list .list-value div.in {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

#port-list .list-value .out {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #fff;
}
</style>
<div class="description-space"><span class="ico"
	style="background-image: url('<%=request.getContextPath()%>/images/flag_no.gif');">节点状态</span>
<span>在线:</span>${ONLINE_NUM} <span class="splite-line">|</span><span>离线:</span>${OFFLINE_NUM}

<table id="device-performance" border="0" cellpadding="0"
	cellspacing="4" style="width: 100%; margin: 4px 0px 4px 0px;">
	<tr>
		<td>
		<table id="dev-current" class="chart-container" style="width: 100%;"
			border="0" cellpadding="0" cellspacing="8">
			<tr>
				<td>
				<div class="chart-title" style="position: relative;"><span
					class="title">状态图表</span><span class="link"></span></div>
				</td>
				<td>
				<div class="chart-title" style="position: relative;"><span
					class="title">[一周]节点告警TOPN</span><span class="link"></span></div>
				</td>
			</tr>
			<tr>
				<td id="dev-current-chart-content" class="chart-content" width="50%">
				<div id="my_chart"
				         	style="padding: 0px; margin: 10px; border: 1px solid lightblue; width: 100%; height: 100%;"></div>					
				</td>
				<td id="dev-current-chart-content" class="chart-content">
				<div id="chart"
					style="padding: 0px; margin: 10px; border: 1px solid lightblue; width: 100%; height: 100%;"></div>		
				</td>
			</tr>
		</table>
		<script type="text/javascript">
		function  getPieData(){    	        
		   var pie_data ={

			"title":{
				"text":"",
				"style": "{font-size:18px; color:#000000; font-family:Verdana; text-align:left;}"
			},
			"bg_colour": "#F8F8D0",
		
			"elements":[
				{
					"type":      "pie",
					"colours":   ["#d01f3c","#356aa0","#C79810"],
					"alpha":     0.6,
					"start-angle": 35,
					"radius":	100,
					"values" :   [
						2,
						3,
						{"value":65,"label":"hello (#val#)", "tip":"99 bottles of beer","on-click":"http://eden"},
						{"value":65,"on-click":"my_function"}
					]
				}
			]
		}
		    
		return JSON.stringify(pie_data);
    
    	}
	    swfobject.embedSWF(
            "<%=request.getContextPath()%>/scripts/openflash/open-flash-chart2.swf", "my_chart","100%", "100%", "9.0.0","<%=request.getContextPath()%>/scripts/openflash/expressInstall.swf",{"get-data":"getPieData"});   
		</script></td>
	</tr>
</table>

<table id="alert-list" class="list" border="0" cellpadding="0"
	cellspacing="1">
	<tr>
		<td class="list-title" style="width: 96px;">所属区局</td>
		<td class="list-title" style="width: 125px;">发生时间</td>
		<td class="list-title" style="width: 125px;">探针名称</td>
		<td class="list-title" style="width: 64px;">告警状态</td>
		<td class="list-title" style="width: 125px;">告警描述</td>
		<td class="list-title" style="width: 125px;">红外指令</td>
	</tr>
	<c:forEach var='vo' items="${RobotNodeAlerts}" varStatus="vs">
			<tr>
				<td class="list-value">${vo.robotManage.regionManage.regionName}</td>
				<td class="list-value">${vo.robotLog.logTimeStr}</td>	
				<td class="list-value">${vo.robotManage.name}</td>				
				<td class="list-value">${vo.robotLog.confirm}</td>	
				<td class="list-value">${vo.robotLog.qoeMomo}</td>	
				<td class="list-value"></td>			
			</tr>
   </c:forEach>	
</table>

<table id="port-list" class="list" border="0" cellpadding="0"
	cellspacing="1">
	<tr>
		<td class="list-title" style="width: 125px;">所属区局</td>
		
		<td class="list-title" style="width: 96px;">节点名称</td>
		
		<td class="list-title" style="width: 125px;">业务可用性</td>
		<td class="list-title" style="width: 64px;">丢包概率</td>
		<td class="list-title" style="width: 125px;">15分钟告警(次数)</td>
		<td class="list-title" style="width: 125px;">24小时告警(次数)</td>
	</tr>
		<c:forEach var='vo' items="${RobotNodeDataList}" varStatus="vs">
			<tr>
				<td class="list-value" style="width: 125px;">${vo.robotManage.regionManage.regionName}</td>
				<td class="list-value" style="width: 96px;">${vo.robotManage.name}</td>	
				<td class="list-value" style="width: 125px;">vo.lastIptvQuality.iptvQualityStr</td>	
				<td class="list-value">vo.lastIptvLostRate.iptvLostRateStr</td>				
				<td class="list-value" style="width: 125px;">${vo.times15min}</td>	
				<td class="list-value" style="width: 125px;">${vo.times24hour}</td>			
			</tr>
   </c:forEach>	
	
</table>

<script type="text/javascript">  
   swfobject.embedSWF(
         "<%=request.getContextPath()%>/scripts/openflash/open-flash-chart2.swf", "chart",
         "100%", "100%", "9.0.0","<%=request.getContextPath()%>/scripts/openflash/expressInstall.swf");
        
    var data={
				 "title":{				    
       				 "text":  "", 
        			 "style": "{font-size: 18px; color:#000000; font-family: Verdana; text-align: left;}"
				  },
				 
				  "y_legend":{
				    "text":"node alert times",
				    "style":"{font-size: 12px; color:#FF6600;}"
				  },
				  
				  "x_legend": { 
				  	"text": "", 
				  	"style": "{font-size: 16px; color: #736AFF}" 
				  },
				  
				  "elements":[
				    {
				      "type":      "bar",
				      "colour":    "#42D5F1",
				      "text":      "圆柱体 ",
				      "width":     3,
				      "font-size": 10,
				      "values" :   [9,6,7,9,5,7,6,9,7,10,13,15]
				    }
				    /*,{"type":"bar_stack", 
					"keys":[{"text":"None", "colour":"#ffdd00", "font-size":13},
					{"text":"Property", "colour":"#ff0000", "font-size":13},
					{"text":"Shares", "colour":"#00ff00", "font-size":13},
					{"text":"Cash", "colour":"#ff00ff", "font-size":13}], 
 					"values":[[2.1502692898502573,2.9939528286922723],
							[{"val":6.878631405299529, "colour":"#ffdd00"}],
							[{"val":4.768015427980572, "colour":"#ff0000"}],
							[0.2392121022567153,1.9415339813567698,0.49541630828753114,
							{"val":1.2363740587607026, "colour":"#ff00ff"}]]

					}*/
				    
				  ],
	   		  
				  "x_axis":{
				    "steps": 1,
				    "labels": {"labels": ["January","February","March","April","May","June","July","August","Spetember","October","November","December"],"colour":"#FFFFFF"}				    
	 			  },
				  "y_axis":{ 
       			    "stroke":2, 
        			"tick_length":3, 
        			"colour":"#999999", 
        			"grid_colour":"#00ff00", 
        			"offset":0, 
       				"max":20 ,
       				"labels": {
				        "colour": "#FFFFFF"
				    }
    				}
    				, "bg_colour": "#F8F8D0"
		
		}
    
      
	function open_flash_chart_data()
	{	 
		 return JSON.stringify(data);
	}
    
    //var tmp = findSWF("chart");
    //tmp.load(JSON.stringify(data));		
    
</script>

<script type="text/javascript">	
	collapsible('alert-list','最近10-15分钟告警','expanded');
	collapsible('node-list','节点信息总览','expanded');	
</script>

<script type="text/javascript">
function findSWF(movieName) {  
  if (navigator.appName.indexOf("Microsoft")!= -1) {  
    return window[movieName];  
  } else {  
    return document[movieName];  
  }  
}
</script>